/* eslint-disable no-unused-vars */
import React, { useState } from 'react';
import { Button } from 'antd';
import { ReloadOutlined, CloseOutlined } from '@ant-design/icons';

/**
 * @param {object} 图片信息
 * @description 图片的预览，可以进行旋转
 */
function ImageRoate(props) {
	const { info } = props;
	const [count, setCount] = useState(0);
	const look = () => {
		if (count % 4 === 0 && count !== 0) {
			setCount(0);
		} else {
			const data = count + 1;
			setCount(data);
			console.log(count);
			if (count === 0) {
				document.getElementById('roate').style.transform = 'rotate(90deg)';
			} else if (count === 1) {
				document.getElementById('roate').style.transform = 'rotate(180deg)';
			} else if (count === 2) {
				document.getElementById('roate').style.transform = 'rotate(270deg)';
			} else if (count === 3) {
				document.getElementById('roate').style.transform = 'rotate(360deg)';
			}
		}
	};
	const cancle = () => {
		document.getElementById('img').style.display = 'none';
	};
	const show = () => {
		document.getElementById('img').style.display = 'block';
	};
	const imgStyle = {
		margin: '0 50%',
		marginTop: '5%',
		width: '800px',
		height: '600px',
		position: 'relative',
		right: '500px',
	};
	const appStyle = {
		display: 'none',
		width: '100%',
		height: '100%',
		transform: 'translate3d(0px, 0px, 0px)',
		backgroundColor: 'rgb(0, 0, 0)',
		position: 'fixed',
		top: '0',
		opacity: 0.5,
		zIndex: '100',
		boxShadow: '0 1px 2px -2px rgb(194, 191, 191), 0 3px 6px 0 rgb(194, 191, 191), 0 5px 12px 4px rgb(194, 191, 191)',
	};
	const buttonStyle = {
		position: 'relative',
		left: '70%',
		color: 'black',
		fontSize: '20px',
	};
	return (
		<div>
			<div>
				<Button onClick={show} type="link">
					{info.name}
				</Button>
			</div>
			<div id="img" style={appStyle}>
				<div style={buttonStyle}>
					<Button onClick={look} type="link">
						<ReloadOutlined />
					</Button>
					<Button onClick={cancle} type="link">
						<CloseOutlined />
					</Button>
				</div>
				<img style={imgStyle} src={info.path} alt="图片" id="roate" />
			</div>
		</div>
	);
}
export default ImageRoate;
